<template>
  <div>
    <!-- 录入客户 -->
    <ZwSearchForm row-num="2" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
    <ZwTable ref="tableRef" class="table-box" :option="tableOption" :rowKey="getRowKey" :fetch-params="state.searchParams" :fetch-api="fetchApi()"  @selection-change="handleSelectionChange">
      <template #headerOperate>
          <el-button @click="massDistribution">批量移出</el-button>
          <el-button type="primary" @click="openDepart">添加员工</el-button>
      </template>
    </ZwTable>
  </div>
  <ZWDepart ref="DepartRef" @submit="getDepart" :type="1" />
</template>

<script lang="tsx" setup>
  import ZWDepart from '@/components/ZWDepart.vue'
  import ZWPagination from '@/components/ZWPagination.vue'
  import { getCustList, distributionFile } from '@/api/customer'
  import { getstafflist, getstaffoperate } from '@/api/employe/storemanagement/sensitiveWord'
  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  import ZwTable from '@/components/zw/table/Table'
  import { getSetionId } from '@/utils/utils'

  import { ref, reactive, computed, nextTick, onMounted } from 'vue'
  import { useStore } from '@/store'
  import { ElMessage, ElAvatar, ElButton } from 'element-plus'
  import { deepCopy } from '@/utils/helper'

  const store = useStore()

  const tableRef: any = ref(null)
  const ZWDepartDom: any = ref(null)
  const DepartRef: any = ref(null)
  const props = defineProps({
    id: String
  })
  const creators = ref([])
  const users = ref([]) //员工id
  const formInline = reactive({
    search_value: '',
    store_id: props.id // 门店id
  })
  let pageInfo = reactive({
    page_size: 15,
    page: 1,
    total: 0
  })

  const tableData = ref([])

  const searchOption = computed(() => {
    return [
      {
        label: '成员搜索',
        name: 'search_value',
        value: '',
        type: 'input',
        placeholder: '请输入成员名称'
      }
    ]
  })
  const tableOption = [
    {
      type: 'selection',
      width: 55,
      fixed: 'left',
      reserveSelection: true
    },
    {
      prop: 'staff_name',
      label: '企业成员',
      render({row}) {
        return (
          <div class="explicit-wrap">
            <ElAvatar shape="square" size={36} src={row.staff_avatar} />
            <span>{ row.staff_name }</span>
          </div>
        )
      }
    },
    {
      prop: 'partment_name',
      label: '所在部门',
      width: 200
    },
    {
      prop: 'operate',
      label: '操作',
      align: 'left',
      fixed: 'right',
      width: 120,
      isOperate: true,
      renderOperate({ row, column, index }) {
        return (
            <ElButton size="small" onClick={() => handReassign(row)} >
              移出门店
            </ElButton>
        )
      }
    }
  ]
  const getRowKey = (row: any) => {
    return row.id
  }
  const defaultParams = reactive({
    store_id: props.id,
    search_value: ''
  })
  const state = reactive({
    searchParams: deepCopy({ ...defaultParams, store_id: props.id })
  })
  const search = (data: any) => {
    tableRef.value.getTable().clearSelection()
    state.searchParams = { ...deepCopy(data), store_id: props.id }
  }
  const reset = (v?: any) => {
    tableRef.value.getTable().clearSelection()
    state.searchParams = deepCopy({ ...v, store_id: props.id })
  }
  const fetchApi = () => {
    // 获取文件列表
    getTableH()
    return getstafflist
  }
  // 获取表格高度
  const getTableH = () => {
    nextTick(() => {
      tableRef.value.getTableH()
    })
  }
  // 表格多选
  const multipleSelection = ref([])
  const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
  }

  //添加员工
  const openDepart = () => {
    DepartRef.value.isQRAuth = true
    DepartRef.value.selectedMember = creators.value
    DepartRef.value.departVisble = true
    DepartRef.value.title = '选择员工'
  }
  const getDepart = (res: any) => {
    creators.value = res
    users.value = getSetionId('id', creators.value)
    DepartRef.value.departVisble = false
    tableRef.value.reload()
    const pram = {
      store_id: props.id, // 门店id
      type: '1', //1批量添加  2批量移出
      staff_ids: users.value
    }
    getstaffoperate(pram).then((res: any) => {
      tableRef.value.getTable().clearSelection()
      tableRef.value.reload()
      
    })
  }
  //移除员工
  const handReassign = (res: any) => {
    const pram = {
      store_id: props.id, // 门店id
      type: '2', //1批量添加  2批量移出
      staff_ids: [res.id]
    }
    getstaffoperate(pram).then((res: any) => {
      tableRef.value.getTable().clearSelection()
      tableRef.value.reload()
    })
  }
  // 批量删除
  const massDistribution = () => {
    // console.log(multipleSelection.value, 'multipleSelection')
    if (multipleSelection.value.length <= 0) {
      ElMessage.error('请至少选择1项')
    } else {
      let staff_ids = ''
      console.log(multipleSelection.value, 'multipleSelection')
      staff_ids = multipleSelection.value.map((v) => v.id)
      // console.log(formData, 'formDataformDataformData')
      const pram = {
        store_id: props.id, // 门店id
        type: '2', //1批量添加  2批量移出
        staff_ids: staff_ids
      }
      getstaffoperate(pram).then((res: any) => {
        tableRef.value.getTable().clearSelection()
        tableRef.value.reload()
      })
    }
  }

</script>

<style scoped lang="scss">
  .select-box {
    padding: 0 9px;
    border: 1px solid #eaeaea;
    background: #f9f9f9;
    border-radius: 1px;
    margin-right: 28px;
    :deep .el-input__inner {
      border: none;
      background: #f9f9f9;
    }
  }
  .input-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;
  }
  .mc-header {
    background-color: #f9f9f9;
    height: 56px;
    width: 100%;
    margin-top: 10px;
    .form-inline {
      width: 100%;
      height: 56px;
      display: flex;
      justify-content: space-between;
      .el-form-item {
        margin-bottom: 0;
        padding: 0 18px;
        margin-right: 0;
      }
      display: flex;
      align-items: center;
    }
  }

  .tags_con {
    margin: auto;
    width: 100%;
    align-items: center;
    display: flex;
    .tags_box {
      text-align: left;
      flex: 1;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .tag_total {
      // flex: 1;
      span {
        color: #ff6b00;
      }
    }
  }
  .img {
    width: 80px;
  }

  .table_tag {
    display: inline-block;
    color: #969696;
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    margin: 5px;
  }
  .high_light {
    border: 1px solid #ff6b00;
    color: #ff6b00;
  }

  .table_tag_con {
    display: flex;
    align-items: center;
  }

  :deep(.explicit-wrap) {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
</style>
